<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props及对props属性的限制</title>
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <!-- 添加了一个 PropTypes 对象, 可以对props属性进行限制 -->
  <script src="https://cdn.staticfile.org/prop-types/15.5.10/prop-types.js"></script>
</head>
<body>
  <div>
    <div id="root1"></div>
    <div id="root2"></div>
    <div id="root3"></div>
  </div>
  <script type="text/babel">
  class Person extends React.Component {
    render() {
      const {name, age, gender} = this.props
      return(
        <ul>
          <li>姓名:{name}</li>
          <li>年龄:{age + 1}</li>
          <li>性别:{gender}</li>
        </ul>
      )
    }
   
  }
  // 设置Person实例对象props属性的限制
  Person.propTypes = {
      name: PropTypes.string.isRequired, //限制name必传且为字符串
      gender: PropTypes.string, //限制gender为字符串
      age: PropTypes.number, //限制age字符串
      speak: PropTypes.func //限制speak函数类型
    }
    // 设置props属性的默认值
    Person.defaultProps = {
      gender: '不男不女',
      age: 18
    }
  // ReactDOM.render(<Person name="Tom" age="18" gender="男"/>, document.getElementById('root1'))
  const p = {name: '老刘', age: 18, gender: '男'}
  ReactDOM.render(<Person {...p}/>, document.getElementById('root2'))
  // props属性添加数字类型得加 {}, 不能直接写
  ReactDOM.render(<Person name="阿里" age={20} gender="男" speak={speak}/>, document.getElementById('root1'))
  function speak() {
    console.log('我会说话');
  }
 
  
  
  </script>
</body>
</html>